<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:ry="">
	<head>
		<th:block th:include="include :: header('修改字典类型')" />
		<style type="text/css">
		th {
			text-align: center;
		}
		#item_list td {
			position: relative;
		}
		#item_list label.error {
			position: absolute;
		    right: 12px;
		    top: 17px;
		    color: #ef392b;
		    font-size: 12px;
		}
		</style>
	</head>
	<body class="gray-bg">
		<div class="main-content">
			<form class="form-horizontal m" id="form-dict-edit">
                <input type="hidden" id="dict_id" name="dict_id" th:value="${dict.dictId}" />
                <input type="hidden" id="old_dict_type" name="old_dict_type" th:value="${dict.dictType}" />
                <h4 class="form-header h4">基本信息</h4>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">字典组名称：</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" name="dict_name" id="dict_name" th:value="${dict.dictName}" required/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">字典组编号：</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" name="dict_type" id="dict_type" th:value="${dict.dictType}" required/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">状态：</label>
                            <div class="col-sm-8">
                                <ry:radioDict dictType="sys_normal_disable" name="status" class="radio-box" required="true" th:value="${dict.status}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">备注：</label>
                            <div class="col-xs-10">
                                <textarea id="remark" name="remark" class="form-control">[[${dict.remark}]]</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <h4 class="form-header h4">字典项配置</h4>
                <div class="btn-group-sm" id="toolbar" role="group" style="margin-bottom: 10px;">
                    <a class="btn btn-success" onclick="insertRow()">
                        <i class="fa fa-plus"></i> 新增字典项
                    </a>
                </div>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><font color="red">*</font>字典标签</th>
                        <th><font color="red">*</font>字典键值</th>
                        <th>样式属性</th>
                        <th style="width: 70px;"><font color="red">*</font>排序</th>
                        <th style="width: 100px;"><font color="red">*</font>状态</th>
                        <th style="width: 120px;">回显样式</th>
                        <th style="width: 80px;"><font color="red">*</font>系统默认</th>
                        <th>备注</th>
                        <th style="width: 70px;">操作</th>
                    </tr>
                    </thead>
                    <tbody id="item_list">
                    <tr th:each="item,item_stat : ${itemList}" >
                        <td align="center">
                            <input type="hidden" name="row_num" th:value="${item_stat.count}"/>
                            <input class="form-control" type="text" th:id="dict_label+${item_stat.count}" name="dict_label" th:value="${item['dict_label']}" style="width: 99%;" required/>
                        </td>
                        <td align="center">
                            <input class="form-control" type="text" th:id="dict_value+${item_stat.count}" name="dict_value" th:value="${item['dict_value']}" style="width: 99%;" required/>
                        </td>
                        <td align="center">
                            <input class="form-control" type="text" name="css_class" th:value="${item['css_class']}" style="width: 99%;">
                        </td>
                        <td align="center">
                            <input class="form-control" type="text" th:id="dict_sort+${item_stat.count}" name="dict_sort" th:value="${item.dict_sort}" style="width: 99%;" required/>
                        </td>
                        <td align="center">
                            <select name="item_status" class="form-control">
                                <option value="0" th:selected="${item.status == '0'}">正常</option>
                                <option value="1" th:selected="${item.status == '1'}">停用</option>
                            </select>
                        </td>
                        <td align="center">
                            <select name="list_class" class="form-control">
                                <option value="">请选择...</option>
                                <option value="default" th:selected="(${item.list_class} == 'default')">默认</option>
                                <option value="primary" th:selected="(${item.list_class} == 'primary')">主要</option>
                                <option value="success" th:selected="(${item.list_class} == 'success')">成功</option>
                                <option value="info" th:selected="(${item.list_class} == 'info')">信息</option>
                                <option value="warning" th:selected="(${item.list_class} == 'warning')">警告</option>
                                <option value="danger" th:selected="(${item.list_class} == 'danger')">危险</option>
                            </select>
                        </td>
                        <td align="center">
                            <select name="is_default" class="form-control">
                                <option value="Y" th:selected="${item.is_default == 'Y'}">是</option>
                                <option value="N" th:selected="${item.is_default == 'N'}">否</option>
                            </select>
                        </td>
                        <td align="center">
                            <input class="form-control" type="text" name="item_remark" th:value="${item.remark}" style="width: 99%;">
                        </td>
                        <td align="center">
                            <a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeRow(this)"><i class="fa fa-remove"></i>删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
			</form>
		</div>
        <div class="col-sm-offset-5 col-sm-10" style="margin-top: 10px;">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>

		<th:block th:include="include :: footer" />
		<script type="text/javascript">
            $(function () {
                if ($.validator) {
                    $.validator.prototype.elements = function () {
                        var validator = this,
                            rulesCache = {};
                        return $(this.currentForm)
                            .find("input, select, textarea")
                            .not(":submit, :reset, :image, [disabled]")
                            .not(this.settings.ignore)
                            .filter(function () {
                                if (!this.name && validator.settings.debug && window.console) {
                                    console.error("%o has no name assigned", this);
                                }
                                rulesCache[this.name] = true;
                                return true;
                            });
                    }
                }
            });
			var prefix = ctx + "system/dict";

			$("#form-dict-edit").validate({
                ignore: "",
				onkeyup: false,
				rules:{
					dict_type:{
						minlength: 5,
						remote: {
			                url: prefix + "/checkDictTypeUnique",
			                type: "post",
			                dataType: "json",
			                data: {
			                	dict_id : function() {
			                        return $("#dict_id").val();
			                    },
			                	dict_type : function() {
			                		return $.common.trim($("#dict_type").val());
			                    }
			                },
			                dataFilter: function(data, type) {
			                	return $.validate.unique(data);
			                }
			            }
					},
				},
				messages: {
			        "dict_type": {
			            remote: "该字典类型已经存在"
			        }
			    },
			    focusCleanup: true
			});

			function submitHandler() {
		        if ($.validate.form()) {
		        	$.operate.saveTab(prefix + "/edit", $('#form-dict-edit').serialize());
		        }
		    }

			/*删除字典项*/
			function removeRow(src) {
                var length = $("#item_list").find("input[name='row_num']").length;
		        if(length == 1) {
	        		$.modal.alertWarning('请至少保留一行数据！');
	        		return;
	        	}
	        	$(src).parent().parent().remove();
			}

			/* 新增字典项 */
	        function insertRow(){
                var rowNum = $.common.maxInt($("input[name='row_num']").toArray()) + 1 ;
                var newTr = $("#item_list").find("tr").eq(0).clone(true);
                newTr.find("input").val("").removeClass("error");
                newTr.find("input[name='dict_label']").attr("id", "dict_label"+rowNum);
                newTr.find("input[name='dict_value']").attr("id", "dict_value"+rowNum);
                newTr.find("input[name='dict_sort']").attr("id", "dict_sort"+rowNum);
                newTr.find("input[name='row_num']").val(rowNum);
                newTr.find("select[name='item_status']").val("0");
                newTr.find("select[name='list_class']").val("");
                newTr.find("select[name='is_default']").val("N");
                newTr.find("label.error").remove();
                newTr.appendTo("#item_list");
	        }
		</script>
	</body>
</html>